<template>
  <div class="text_money">
    <NuxtImg class="bg" src="/images/ranking/bg.png" />

    <div class="money">
      <NuxtImg src="/images/ranking/text-01.png" />
      <p>{{ userStore.moneyUnit }} {{ money }}</p>
    </div>
    <p class="text1" v-if="activeParentTab === 1">
      <span class="t1-per">8 %</span> {{ lang.money_tip_1 }}
    </p>
    <p class="text1" v-if="activeParentTab === 2">
      0.6 % {{ lang.money_tip_2 }}
    </p>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

defineProps(["activeParentTab", "activeChildTab"]);

const userStore = useUserStore();

const money = ref("260.307,02");
</script>

<style scoped lang="scss">
.text_money {
  margin-top: 0.3rem;
  text-align: center;
}
.text_money .bg {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 0;
}
.text_money .money {
  margin-top: -0.1rem;
  height: 4rem;
  position: relative;
  text-align: center;
}
.text_money .money img {
  height: 4rem;
}
.text_money .money p {
  height: 0.75rem;
  font-family: FZChaoCuHei-M10;
  font-size: 0.75rem;
  color: #000;
  line-height: 0.75rem;
  font-weight: 600;
  background: linear-gradient(
    180deg,
    #ffffff 14.990234375%,
    #f9ea00 50.3662109375%,
    #ffae0b 85.009765625%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  bottom: 0.96rem;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
}
.text_money .text1 {
  font-weight: 400;
  font-size: 0.32rem;
  text-align: center;
  position: relative;
  margin-top: -0.1rem;
  color: #a7efff;
}
.t1-per {
  color: #000;
  font-family: FZChaoCuHei-M10;
  background: linear-gradient(to right, #f9ea00 0, #ffae0b 85.009765625%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
